class Frame {
	constructor(option) {
		this.width = option.width || 260;
		this.height = option.height || 160;
		this.pos = option.pos || {
			x: 0,
			y: 0
		}
		this.title = option.title || '提示';
		this.content = option.content || '内容';
		this.confirm = option.confirm || '确认';
		this.cancel = option.cancel || '取消';
		this.showModel = option.showModel === undefined ? true : option.showModel; /* 是否显示弹窗 */
		this.showMask = option.showMask === undefined ? true : option.showMask; /* 是否显示遮罩 */
		this.showConfirm = option.showConfirm === undefined ? true : option.showConfirm; /* 是否显示确认按钮 */
		this.showCancel = option.showCancel === undefined ? true : option.showCancel; /* 是否显示确认按钮 */
		this.isDrag = option.isDrag === undefined ? false : option.isDrag;; /* 是否可拖拽 */
		this.skin = option.skin || ''; /* 主题色 "#20222A"|"#1E9FFF"|"tan" */
		/* 确认回调 */
		this.confirmCallbak = option.confirmCallbak === undefined ? function () {
			console.log('%c confirmCallBack showModel=>' + this.close(), 'color:blue')
		} : option.confirmCallbak;
		/* 取消回调 */
		this.cancelCallbak = option.cancelCallbak === undefined ? function () {
			console.log('%c cancelCallbak showModel=>' + this.close(), 'color:red')
		} : option.cancelCallbak;
	};
	init() {
		/* 创建一个弹框容器 */
		this.gyModel = document.createElement('article');
		this.gyModel.classList.add("gy-model");
		this.gyModel.innerHTML = this.getCss() + this.getModel();
		document.getElementsByTagName("body")[0].appendChild(this.gyModel);
		this.setAttribute();
	};
	getCss() {
		return '<style>*{margin:0;padding:0}.gy-bj{width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:999;background-color:rgb(0,0,0,0.2)}.gy-container{min-width:200px;min-height:160px;position:fixed;left:50%;top:50%;z-index:1000;background-color:#fff;transform:translate(-50%,-50%);border-radius:2px;font-size:14px;box-shadow:1px 1px 5px rgb(0,0,0,0.2)}.gy-close{width:42px;height:42px;line-height:42px;text-align:center;display:inline-block;position:absolute;right:0;top:0;font-size:20px;font-weight:bold;cursor:pointer;user-select:none}.gy-dialog{width:100%;height:100%;display:flex;flex-direction:column}.gy-header{height:42px;line-height:42px;color:#333;padding:0 20px;border-bottom:1px solid #eee;cursor:auto;overflow:auto;text-overflow:ellipsis;white-space:nowrap;user-select:none}.gy-content{flex:1;padding:20px;font-size:14px;text-align:left;color:#666;overflow:hidden;word-break:break-all;overflow-x:hidden;overflow-y:auto}.gy-footer{text-align:right;padding:0 15px 12px;pointer-events:auto;user-select:none}.gy-footer .btn{height:28px;line-height:28px;margin:5px 5px 0;padding:0 15px;border:1px solid #dedede;background-color:#fff;color:#333;border-radius:2px;font-weight:400;cursor:pointer;text-decoration:none}.gy-footer .btn.confirm{border-color:#1e9fff;background-color:#1e9fff;color:#fff}</style>';
	};
	getModel() {
		return '<div class="gy-bj"></div><div class="gy-container"><span class="gy-close">&times</span><div class="gy-dialog"><div class="gy-header">提示</div><div class="gy-content">内容</div><div class="gy-footer"><button class="btn confirm">确认</button><button class="btn cancel">关闭</button></div></div></div>';
	};
	setAttribute() {
		this.gyBj = this.gyModel.querySelector('.gy-bj');
		this.gyContainer = this.gyModel.querySelector('.gy-container');
		this.gyClose = this.gyContainer.querySelector('.gy-close');
		this.gyHeader = this.gyContainer.querySelector('.gy-header');
		this.gyContent = this.gyContainer.querySelector('.gy-content');
		this.gyConfirm = this.gyContainer.querySelector('.btn.confirm');
		this.gyCancel = this.gyContainer.querySelector('.btn.cancel');

		this.gyContainer.style.width = this.width + 'px';
		this.gyContainer.style.height = this.height + 'px';
		this.gyHeader.innerHTML = this.title;
		this.gyContent.innerHTML = this.content;
		this.gyConfirm.innerHTML = this.confirm;
		this.gyCancel.innerHTML = this.cancel;
		this.showModel ? this.open() : this.close();
		this.gyBj.style.display = this.showMask ? "block" : "none";
		this.gyConfirm.style.display = this.showConfirm ? "inline-block" : "none";
		this.gyCancel.style.display = this.showCancel ? "inline-block" : "none";
		if (this.skin) {
			this.gyHeader.style.backgroundColor = this.skin;
			this.gyHeader.style.color = '#fff';
			this.gyClose.style.color = '#fff';
			this.gyConfirm.style.backgroundColor = this.skin;
			this.gyConfirm.style.borderColor = this.skin;
		}
		if (this.pos.x && this.pos.x !== -1) this.gyContainer.style.left = this.pos.x +
			this.gyContainer.offsetWidth / 2 + 'px';
		if (this.pos.y && this.pos.y !== -1) this.gyContainer.style.top = this.pos.y +
			this.gyContainer.offsetHeight / 2 + 'px';
		this.bindEvent();
	};
	bindEvent() {
		if (this.isDrag) {
			this.gyHeader.style.cursor = "move";
			let _gyContainer = this.gyContainer;
			/* 样式中用了这个属性居中, 影响拖拽定位, 还原位置 */
			_gyContainer.style.transform = "translate(0%, 0%)";
			_gyContainer.style.left = _gyContainer.offsetLeft - _gyContainer.offsetWidth / 2 + 'px';
			_gyContainer.style.top = _gyContainer.offsetTop - _gyContainer.offsetHeight / 2 + 'px';
			this.gyHeader.addEventListener('mousedown', function (e) {
				e.preventDefault();
				let x = e.pageX - _gyContainer.offsetLeft; /* 鼠标距离左边的位置 减去 模态框距离父元素左边的距离 */
				let y = e.pageY - _gyContainer.offsetTop; /* 鼠标距离上边的位置 减去 模态框距离父元素上边的距离 */
				document.addEventListener('mousemove', move);

				function move(e) {
					e.preventDefault();
					let left = e.pageX - x;
					let top = e.pageY - y;

					left = left < 0 ? 0 : left;
					top = top < 0 ? 0 : top;

					left = left > innerWidth - _gyContainer.offsetWidth ? innerWidth - _gyContainer
						.offsetWidth : left;
					top = top > innerHeight - _gyContainer.offsetHeight ? innerHeight -
						_gyContainer.offsetHeight : top;

					_gyContainer.style.left = left + 'px'; /* 鼠标的位置减去鼠标距离模态框左边的位置设置为模态框距离父元素左边的距离 */
					_gyContainer.style.top = top + 'px'; /* 鼠标的位置减去鼠标距离模态框上边的位置设置为模态框距离父元素上边的距离 */
				}
				document.addEventListener('mouseup', function () {
					document.removeEventListener('mousemove', move);
				});
			});
		};
		/* this.gyBj.onclick = this.gyClose.onclick = ()=>{this.close();}; */
		this.gyBj.onclick = this.gyClose.onclick = this.gyCancel.onclick = () => {
			this.cancelCallbak && this.cancelCallbak();
		};
		this.gyConfirm.onclick = () => {
			this.confirmCallbak && this.confirmCallbak();
		};
	}
	open() {
		this.gyModel.style.display = "block";
		return this.showModel = true;
	};
	close() {
		/* this.gyBj.style.display = "none";
		this.gyModel.style.transform = "translate(0%, 0%) scale(0)";
		this.gyModel.style.transition = "transform 0.5s linear";
		setTimeout(() => this.gyModel.remove(), 500); */
		this.gyModel.remove()
		return this.showModel = false;
	};
	getStyle(e, attr) {
		return window.getComputedStyle ?
			getComputedStyle(e).getPropertyValue(attr) :
			e.currentStyle[attr];
	};
	move(dom, option, time, callback) {
		let len = 0;
		for (const key in option) {
			len++;
			clearInterval(dom[key]);
			dom[key] = setInterval(() => {
				let attrValue = parseInt(this.getStyle(dom, key));
				var speed = (option[key] - attrValue) / 10;
				speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
				attrValue += speed;
				dom.style[key] = attrValue + "px";
				if (attrValue == option[key]) {
					clearInterval(dom[key]);
					len--;
					if (len == 0) callback && callback();
				}
			}, time);
		}
	};
}
class Model extends Frame {
	constructor(option) {
		super(option);
	}
}
class AdPopModel extends Frame {
	constructor(option) {
		option.width = 200;
		option.height = 280;
		option.showMask = false;
		option.showConfirm = false;
		option.showCancel = false;
		option.isDrag = false;
		option.pos = {
			x: innerWidth - option.width,
			y: innerHeight - option.height
		}
		super(option);

		/* 十秒后自动关闭 */
		this.timeout = setTimeout(() => {
			/* super.colse(); */
			this.close();
		}, 5000);
	}
	close() {
		super.move(this.gyContainer, {
			'top': innerHeight
		}, 100, () => {
			super.close();
		});
		// 清除5s后关闭延迟
		clearTimeout(this.timeout);
	}
}
    